// pages/video/video.js
import request from "../../utils/request"

Page({
    //存储视频播放器对象
    player: null,
    // 请求视频数据的offset参数
    offset: 0,
    //定义一个是否正在加载更多的状态
    loadMore: false,
    // 是否还有新的数据用来加载（因为被上拉加载的数据是有数量限制的）
    hasMore: true,


    /**
     * 页面的初始数据
     */
    data: {
        //视频上方的导航列表
        videoGroups: [],
        //当前被点击的那个视频所在的导航的id
        activeVideoGroupId: "",
        //定义视频展示区的视频数据
        videos: [],
        // 当前正在播放的 video 的 id
        vid: "",
        // 把播放过的视频的id和对应时间记录起来，需要用对象
        // 因为有多个视频，所以使用数组
        //例如： playRecoedList => [{id: 1, currentTime: 1.3}]
        playRecordList: [],
        //定义一个下拉刷新的状态，自定义下拉刷新被触发，true为触发，false为未触发
        refreshFlag: false
    },
    //获取视频上方的导航列表数据
    async getVideoGroups() {
        try {
            const res = await request({
                url: "/video/group/list"
            })
            // console.log(res);
            if (res.data.code === 200) {
                this.setData({
                    videoGroups: res.data.data.slice(0, 20),
                    activeVideoGroupId: res.data.data[0].id
                })
                // 请求视频，整个请求一定要在 this.setData() 之后，至少要保证 activeVideoGroupId 是存在的
                this.getVideos();
            }
        } catch (error) {
            console.log(error);
            wx.showToast({
                title: '请求出错',
                icon: "error"
            })
        }
    },
    //当前被点击的某一个导航的回调
    changeActiveGroup(e) {

        // 每次点击导航时重置数据，offset，videos等
        this.offset = 0;
        this.loadMore = false;
        this.hasMore = true;

        this.setData({
            vid: '',
            videos: [],
            activeVideoGroupId: e.currentTarget.dataset.id
        })
        //当点击到某一个视频导航时需要发送指定id的视频数据列表请求
        this.getVideos()
    },
    //获取视频数据(这一步需要将cookie信息一起带给后台)
    async getVideos() {
        try {
            const res = await request({
                url: "/video/group",
                data: {
                    id: this.data.activeVideoGroupId,
                    offset: this.offset
                }
            })
            // console.log(res);
            if (res.data.code === 200) {
                // 下拉刷新和上拉加载更多调用都是同一个接口
                // 下拉刷新请求到数据是覆盖的
                // 上拉加载更多请求到的数据是累加的
                // 解决：在这里永远都是累加操作
                this.setData({
                    videos: [
                        ...this.data.videos,
                        ...res.data.datas.map(item => item.data)
                    ]
                })
                //得到新的videos的值后修改offset的值
                this.offset += res.data.datas.length
                // 请求到的数据中包含一个hasMore属性，将其赋值给上方定义的hasMore，值为true代表还有数据可以请求，值为false代表没有更多数据可供请求了
                this.hasMore = res.data.hasmore
            }
        } catch (error) {
            console.log(error);
            wx.showToast({
                title: '请求出错',
                icon: "error"
            })
        }
        //请求视频完毕后关闭下拉状态
        this.setData({
            refreshFlag: false
        })
        // 请求视频完毕后 将loadMore 设置为 false，下次触发上拉的时候又可以发送请求(相当于是等上一个加载更多的请求发送完毕后再发送下一个加载更多的请求)
        this.loadMore = false
    },
    //点击某个视频的时候触发的回调
    videoTapHandler(e) {
        // console.log(e);
        //记录当前被点击的视频的id
        const vid = e.currentTarget.id

        // 要求每次同时只有一个 video 是播放的，需要在当前这个播放之前停止上一个 video 的播放
        if (!this.player) {
            // console.log("第一次点击");
            //这里面就是首次进入页面点击第一个视频的逻辑,第一次点击观看视频不需要考虑跳转到上次播放的位置
            // 利用当前获取到的 vid 来创建 VideoContext 对象,这里直接把创建的 VideoContext 对象赋值给上方定义的player，后续就只需操控player的播放与暂停即可
            this.player = wx.createVideoContext(vid)
            //首次点击某个视频使其播放
            this.player.play()
            // 把当前正在播放的 vid 存到在data中定义的vid
            this.setData({
                vid
            })
        } else {
            //这里就是非首次播放的逻辑，进到这里说明前面已经有player播放过
            //需要判断一下点击的和正在播放的视频是不是同一个
            if (vid === this.data.vid) {
                //如果点击的是同一个视频，说明需要暂停
                //这里的逻辑也不需要考虑是否跳转到上次播放的位置，因为能走到这个逻辑里面，说明当前我们点的时候，这个视频就是播放的状态，现在我们想暂停
                this.player.pause()
                //暂停后要清空 vid 的值，否则就会出现如果下次还点击该视频，vid === this.data.vid 就一直为 true,会出现再次点击同一个视频无法播放的情况
                this.setData({
                    vid: ""
                })
            } else {
                //如果点击的和上一个是不同的视频，说明要暂停上一个，播放当前点击的
                this.player.pause()
                // 使用当前最新点击的 vid 来创建 palyer，然后播放
                this.player = wx.createVideoContext(vid)

                // 在这里需要考虑：这个视频有没有被播放过，如果有播放过，就需要知道当前这个视频上次播放到了什么时间点上了
                // 可以在 bindtimeupdate 中去随时记录视频播放的时间点
                // 从 playRecordList 中查找当前需要播放的视频是否存在记录,如果有记录，则使用seek方法去存储播放时间.如果没有播放记录，则正常播放即可，并且把data中的vid进行更新
                const data = this.data.playRecordList.find(item => item.id === vid)
                if (data) {
                    this.player.seek(data.currentTime)
                }
                // 启动播放
                this.player.play()
                // 存储最新vid
                this.setData({
                    vid
                })
            }
        }


    },
    // 通过 timeupdate 记录当前视频播放的时间
    timeupdateHandler(e) {
        // console.log(e);
        // 当前视频的 id
        const id = e.currentTarget.id
        // 当前视频的播放时间
        const currentTime = e.detail.currentTime
        // 把已有的播放记录先取出来
        const playRecordList = this.data.playRecordList
        // 判断当前视频是否在已播放过的列表 playReordList 中存在
        const data = playRecordList.find(item => item.id === id)
        if (data) {
            // 如果存在则更新该条数据的currentTime，使其定位至上次播放的时间
            // console.log('有该视频的记录，更新');
            data.currentTime = currentTime;
        } else {
            // 如果当前播放的食谱不在播放记录列表中，则直接在playRecordList中新增
            // console.log("没有该视频的记录，新增");
            playRecordList.push({
                id,
                currentTime
            })
        }
        // 把处理之后的playRecordList数组同步到 data 的 playRecordList 中
        this.setData({
            playRecordList
        })
    },

    //下拉刷新的事件回调
    refresherrefreshHanlder() {
        //事件被开启后，设置下拉状态为true，此时就触发了下拉刷新，这时就可以去发送请求了
        this.setData({
            refreshFlag: true,
            // 下拉刷新时清空原有的数据，防止累加(因为展示列表中一直都只会存储8条数据)
            videos: []
        })
        // 下拉刷新时随机请求一组数据
        this.offset = Math.floor(Math.random() * 16);
        //发送请求
        this.getVideos()

        //关闭下拉状态(注意：因为 getVideos() 方法是异步，所以我们需要等待异步方法执行完成以后，再去设置 refresherFlag为false,所以把关闭下拉状态逻辑放在 getVideos() 方法后面)
    },

    //上拉加载更多
    scrolltolowerHanlder() {
        //只有在还有视频数据可供加载并且没有其它未完成的请求时，才发送上拉加载更多的请求
        if (this.hasMore && !this.loadMore) {
            //此时可以开启加载更多的 loadMore 状态,请求完毕后设置为false，（同样还是异步的问题，所以需要把关闭loadMore状态逻辑放在 getVideos() 方法后面）
            this.loadMore = true
            this.getVideos();
        }

    },




    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.getVideoGroups()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /*
     * 调用分享功能的方式：
     *  - 在右上角胶囊按钮中有一个触发选项（发送给朋友）
     *      注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
     *  - 在页面中自定义分享（<button open-type="share">)
     *  
     * onShareAppMessage
     *  触发分享调用的函数，如果该函数没有定义，则胶囊按钮的分享功能将无效，这个时候只能通过自定义方式来实现分享
     */
    onShareAppMessage(obj) {
        // 当我们触发分享的时候，该函数会被调用，且会通过参数接收微信传入的一些数据
        // console.log(obj);
        // obj.from: 转发事件的来源
        //      menu：右上角转发菜单
        //      button：页面内转发按钮
        // 我们就可以通过 obj.from 来实现差异化内容转发，如果是 button ，则转发页面中其中某个内容，menu 则转发整个页面
        // obj.target: 如果转发的 from 是 button ，则 obj.target 就是这个 button
        if (obj.from === 'button') {
            // 如果我们想自定义转发的内容，则需要在该函数中 return 一个对象
            // 点击某个视频下方的转发按钮，转发该视频相关的信息
            return {
                //title: 转发标题  imageUrl:转发路径
                title: obj.target.dataset.title,
                // path: '/pages/video/video',
                imageUrl: obj.target.dataset.imageUrl
            }
        }
    }
})